<template>
	<view class="wapper">
		<view class="top-fixed">
			<u-navbar :fixed="false" :autoBack="true" :safeAreaInsetTop="true">
				<view class="u-nav-center" slot="center">
					<view class="tab">
						<u-tabs :list="tabList" @click="changeTab"></u-tabs>
					</view>
				</view>
			</u-navbar>
			<view class="filter-con" v-if="active===0">
				<view class="calendar">
					<u-icon name="arrow-left" color="#323232" size="14" @click="changMonth(-1)"></u-icon>
					<view class="arrow" @click="openShow">
						<text>{{time}}</text>
						<u-icon name="arrow-down-fill" color="#323232" size="14"></u-icon>
					</view>
					<u-icon name="arrow-right" color="#323232" size="14" @click="changMonth(1)"></u-icon>
				</view>
				<view class="clearfix"></view>
			</view>
		</view>

		<view class="tab-con">
			<view class="list-con" v-if="active===0" :style="{marginTop:heightEle*2+'rpx'}">
				<view class="photo">
					<view class="img">
						<image :src="userInfo.avatar" v-if="userInfo.avatar"></image>
						<image src="@/static/image/my/defalut.png" v-else></image>
					</view>
					<view class="text">
						<view class="name">{{userInfo.nickName}}</view>
						<view class="job">{{userInfo.dept.deptName}}</view>
					</view>
				</view>
				<u-collapse ref="collapse" @change="change" @close="close" @open="open">
					<u-collapse-item title="出勤天数">
						<text slot="value"
							class="u-page__item__title__slot-title">{{attendanceRecordList.length}}天</text>
						<template v-if="attendanceRecordList &&attendanceRecordList.length>0">
							<div class="u-collapse-content" v-for="(item,index) in attendanceRecordList" :key="index">
								<text class="date">
									{{item.attendanceDate}} ({{item.weekday}})
								</text>
								<text class="status">{{item.attendanceStatusStr}}</text>
							</div>
						</template>
					</u-collapse-item>
					<u-collapse-item title="迟到">
						<text slot="value" class="u-page__item__title__slot-title"
							:class="beLateAttendanceRecordList.length>0?'red':''">{{beLateAttendanceRecordList.length}}次</text>
						<template v-if="beLateAttendanceRecordList &&beLateAttendanceRecordList.length>0">
							<div class="u-collapse-content" v-for="(item,index) in beLateAttendanceRecordList"
								:key="index">
								<text class="date">
									{{item.attendanceDate}} ({{item.weekday}})
								</text>
								<text class="status">{{item.attendanceStatusStr}}</text>
							</div>
						</template>
					</u-collapse-item>
					<u-collapse-item title="早退">
						<text slot="value" class="u-page__item__title__slot-title"
							:class="leaveEarlyAttendanceRecordList.length>0?'red':''">{{leaveEarlyAttendanceRecordList.length}}天</text>
						<template v-if="leaveEarlyAttendanceRecordList &&leaveEarlyAttendanceRecordList.length>0">
							<div class="u-collapse-content" v-for="(item,index) in leaveEarlyAttendanceRecordList"
								:key="index">
								<text class="date">
									{{item.attendanceDate}} ({{item.weekday}})
								</text>
								<text class="status">早退</text>
							</div>
						</template>
					</u-collapse-item>
					<u-collapse-item title="缺卡">
						<text slot="value" class="u-page__item__title__slot-title"
							:class="lackCardAttendanceRecordList.length>0?'red':''">{{lackCardAttendanceRecordList.length}}次</text>
						<template v-if="lackCardAttendanceRecordList &&lackCardAttendanceRecordList.length>0">
							<div class="u-collapse-content" v-for="(item,index) in lackCardAttendanceRecordList"
								:key="index">
								<text class="date">
									{{item.attendanceDate}} ({{item.weekday}})
								</text>
								<text class="status">缺卡</text>
							</div>
						</template>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view class="list-list" v-if="active===1" :style="{marginTop:heightEle1+'rpx'}">
				<template v-if="abnormalAttendanceRecordList && abnormalAttendanceRecordList.length>0">
					<view class="list-item" v-for="(item,index) in abnormalAttendanceRecordList" :key="index">
						<view class="date">{{item.attendanceDate}}</view>
						<view class="red">
							{{item.attendanceStatusStr}}
						</view>
					</view>
				</template>

				<u-empty v-else text="暂无数据" width="320rpx" height="320rpx" icon="../static/image/list-no-data.png"
					class="nodata"></u-empty>

			</view>
		</view>

		<u-datetime-picker :formatter="formatter" v-if="showDate" :maxDate="maxDate" :show="showDate" v-model="newDate"
			mode="year-month" @cancel="cancel" @confirm="confirm">
		</u-datetime-picker>


	</view>
</template>

<script>
	import {
		queryUserMonthlyAttendance
	} from '@/api/team.js'

	export default {
		data() {
			return {
				tabList: [{
					name: '考勤统计'
				}, {
					name: '异常考勤'
				}],
				active: 0,
				showDate: false,
				currentDate: '',
				newDate: Number(new Date()),
				time: '',
				maxDate: '',
				userInfo: {},
				department: '',
				post: '',
				attendanceRecordList: [], // 出勤记录
				beLateAttendanceRecordList: [], //迟到
				leaveEarlyAttendanceRecordList: [], //早退
				lackCardAttendanceRecordList: [], //缺卡
				abnormalAttendanceRecordList: [], //异常考勤
				heightEle: 0,
				heightEle1: 0,
			}
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".top-fixed").boundingClientRect(data => {
				console.log(JSON.stringify(data))
				this.heightEle = Math.floor(data.height)
				this.heightEle1 = Math.floor(data.height) * 2 - 92
			}).exec()

		},
		onLoad() {
			this.getNowFormatDate()
			this.getList()
		},
		onShow() {
			const userInfo = uni.getStorageSync('user_info')
			if (userInfo) {
				this.userInfo = userInfo?.user
			}
		},
		created() {

		},

		methods: {
			changMonth(num) {
				const {
					year,
					month
				} = this.getMonthYear(num)
				let months = month < 10 ? 0 + '' + month : month
				const getTime = year + '-' + months
				if (Number(new Date(getTime)) < Number(new Date(this.currentDate))) {
					this.time = getTime
					this.getList()
				}
				// const currentYear = this.currentDate.split('-')[0]
				// const currentMonth = Number(this.currentDate.split('-')[1])
				// if (year <= currentYear && month <= currentMonth) {
				// 	let months = month < 10 ? 0 + '' + month : month
				// 	this.time = year + '-' + months
				// 	this.getList()
				// }

				// let months = month < 10 ? 0 + '' + month : month
				// this.time = year + '-' + months
				// this.getList()

			},
			// 获取前几个月,未来几个月的年份和月份
			getMonthYear(num) {
				let month = Number(this.time.split('-')[1])
				let year = Number(this.time.split('-')[0])
				let year2 = year
				let month2 = month + num
				if (month + num <= 0) {
					// 之前年份
					year2 = year - 1 - parseInt(Math.abs(month2) / 12)
					month2 = 12 - (Math.abs(month2) % 12)
				} else if ((month2 / 12) > 1) {
					// 之后年份
					year2 = year + (month2 % 12 == 0 ? 0 : parseInt(month2 / 12))
					month2 = parseInt(month2 % 12) == 0 ? 12 : parseInt(month2 % 12)
				}
				return {
					year: year2,
					month: month2
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}

				return value;
			},

			getNowFormatDate() {
				let date = new Date(),
					seperator1 = '-', //格式分隔符
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					strDate = date.getDate() // 获取当前日(1-31)
				if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
				if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
				this.currentDate = year + seperator1 + month
				this.time = this.currentDate
				// + seperator1 + strDate
				this.maxDate = new Date().getTime()
			},
			confirm(e) {
				console.log(e)
				const timeFormat = uni.$u.timeFormat
				this.time = timeFormat(e.value, 'yyyy-mm')
				this.getList()
				this.showDate = false
			},
			open(e) {
				// console.log('open', e)
			},
			openShow() {
				this.newDate = Number(new Date(this.time))
				this.showDate = true
			},
			cancel() {
				this.newDate = ''
				this.showDate = false
				this.newDate = Number(new Date(this.time))
			},
			change(e) {
				// console.log('change', e)
			},
			changeTab(item) {
				this.active = item.index
				console.log('item', item);
			},


			getList() {

				uni.showLoading({
					title: '加载中'
				})
				queryUserMonthlyAttendance({
					yearMonth: this.time
				}).then(res => {
					const {
						attendanceRecordList,
						beLateAttendanceRecordList,
						abnormalAttendanceRecordList,
						leaveEarlyAttendanceRecordList,
						lackCardAttendanceRecordList,
						department,
						post
					} = res.data
					this.attendanceRecordList = attendanceRecordList || []
					this.beLateAttendanceRecordList = beLateAttendanceRecordList || []
					this.abnormalAttendanceRecordList = abnormalAttendanceRecordList || []
					this.lackCardAttendanceRecordList = lackCardAttendanceRecordList || []
					this.leaveEarlyAttendanceRecordList = leaveEarlyAttendanceRecordList || []
					this.department = department
					this.post = post
				}).finally(() => {
					uni.hideLoading()
				})
			}

		},
		watch: {
			time(val) {
				this.$nextTick(() => {
					this.$refs.collapse.init()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		min-height: 100vh;
		background: #f5f5f5;

		.top-fixed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			background: #f5f5f5;
			z-index: 11;
		}

		.height0 {
			height: 200rpx;
		}

		.filter-con {
			height: 90rpx;
			border-radius: 50rpx 50rpx 0 0;
			// position: relative;
			// margin-top: -8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #f5f5f5;
			clear: both;

			.calendar {
				height: 56rpx;
				margin: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.arrow {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						margin-right: 10rpx;
					}
				}
			}


		}


		::v-deep .u-collapse-item {
			.u-cell__body {
				background: #fff;
			}

			.u-collapse-item__content__text {
				padding: 0 !important;
			}

			.u-collapse-content {
				display: flex;
				justify-content: space-between;
				height: 112rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.12);
				padding: 0 32rpx;
				align-items: center;

				&:last-child {
					box-shadow: none;
				}

				.date {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}

				.status {
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FF654E;
				}
			}
		}


		.u-nav-slot {
			display: flex;

		}

		.tab-con {
			width: 100vw;


			.list-con {
				.red {
					color: #FF654E;
				}

				.photo {
					padding: 0 30rpx;
					height: 130rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;

					.img {
						width: 80rpx;
						height: 80rpx;
						margin-right: 25rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;

						}
					}

					.text {
						.name {
							font-size: 30rpx;
							font-weight: 500;
							color: #323232;
							margin-bottom: 8rpx;
						}

						.job {
							font-size: 26rpx;
							font-weight: 400;
							color: #909399;
						}
					}
				}

			}

			.list-list {
				width: 100vw;

				.list-item {
					height: 100rpx;
					background: #fff;
					padding: 0 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #f5f5f5;

					.date {
						font-size: 30rpx;
						font-weight: 500;
						color: #323232;
					}

					.red {
						font-size: 28rpx;
						font-weight: 600;
						color: #FF654E;
					}
				}
			}

		}

	}
</style>
